<template>
    <div>
        <ul class="explain">
            <li>公共组件使用：<br>
                manage-sys-libs 使用 npm link ，抛出包。<br>
                manage-sys-libs-test：<br>
                1、使用 npm link manage-sys-libs 引入包 <br>
                2、main 引入 import libComponent from "manage-sys-libs"; Vue.use(libComponent); <br>
                3、其他组建调用
            </li>
            <li>svg,webpack用法:<br>
                安装:svg-sprite-loader <br>
                webpack:使用：<br>
                {
                    test: /\.svg$/,
                    loader: 'svg-sprite-loader',
                    include: [resolve('src/icons')],
                    options: {
                    symbolId: 'icon-[name]'
                    }
                },
            </li>
            <li>
                icon使用：<br>
                src/icons/svg存放svg <br>
                使用svg-icon icon-class={icon}/ <br>
                icon为文件名 <br>
            </li>
            <li>
                /login 页面：<br>
                使用manage-pubilc-container 进行页面自适应（包括缩放）<br>
                manage-pubilc-container :options="{width:1920,height:1080}"> 存放内容 /manage-pubilc-container> <br>
                属性：options：设定的宽高
            </li>
            <li>
                侧边栏以及头部公共组件：<br>
                使用manag-public-layout <br>
                侧边栏: <br>
                el_sidebarMeum：存放路由数组<br>
                el_rapidCSS:[Object], 获取样式文件，使用如下：<br>
                :background-color="el_rapidCSS.sidebarMenuBg" <br>
                :text-color="el_rapidCSS.sidebarMenuText" <br>
                :active-text-color="el_rapidCSS.sidebarMenuActiveText" <br>
                avatar 为头部用户头像 <br>
                sidebarDeploy:{ <br>
                    showLogo:true, 侧边栏logo显示 <br>
                    title: 'Vue Element Admin', logo的文字 <br>
                    logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png', logo的图片 <br>
                    needTagsView:true,  <br>
                    fixedHeader:true, <br>
                }
            </li>
            <li>
                sass传输给js：<br>
                variables.scss 需要和js共通，所以需要用到css-loader的modules: true,使用这个会导致vue的style样式缺失。<br>
                配置方法：<br>
                ./src/plugin/auto-css-modules.js: <br>
                在路径末尾加上 css_modules 用于 webpack 匹配该文件，如 import Test from './test.less'; 变成 import Test from './test.less?css_modules';<br>
                .babelrc: <br>
                "plugins":["./scripts/plugin/auto-css-modules.js", // 引入插件] <br>
                webpack配置：<br>
                {
                    test: /\.scss$/,
                    exclude:[path.resolve(__dirname, '../node_modules')],
                    oneOf: [
                    // 这里匹配 module
                    {
                        resourceQuery: /css_modules/,
                        use: [
                        'vue-style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                            importLoaders: 2,
                            modules: true,
                            localIdentName: '[local]_[hash:base64:5]'
                            }
                        },
                        "sass-loader",
                        "postcss-loader",
                        ]
                    },
                    // 这里匹配普通的
                    {
                        use: [
                        'vue-style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                            importLoaders: 2,
                            }
                        },
                        "sass-loader",
                        "postcss-loader",
                        ]
                    }
                    ] <br>
                    https://www.cnblogs.com/hl1223/p/13073628.html
                },
            </li>
            <li>
                js数据给css <br>
                vue 标签 属性:style="{'--cssname':jsvalue}" 多个使用,分开<br>
                vue js定义jsvalue的值<br>
                vue css使用 color:var(--cssname) <br>
            </li>
            <li>
                一键更改主题：<br>
                mian.js ：<br>
                import "./styles/theme/index.css"; element的主题颜色
                import rapidCSS from '@/styles/rapidCSS.scss'  配合 element的主题颜色 进行修改
                Vue.prototype.$rapidCSS = rapidCSS;  需要传给组件
                App.vue : <br>
                manage-class id="app" :el_rapidCSS="$rapidCSS" > <br>
                    router-view /> <br>
                /manage-class> <br>
            </li>
            <li>
                权限：<br>
                使用自定义指令，再对需要设置权限的绑定指令 <br>
                内容：src/has_obj/btnPermissions.js <br>
                mian.js 引用 import has from '@/has_obj/btnPermissions.js' <br>
                使用：v-has="{ mate: 'addressBook:generateDiagram' }" <br>
            </li>
            <li>
                axios 封装：<br>
                request.js 用于处理axios封装 <br>
                service.js 用于处理业务模块的统一设置，比如应对增删改查的处理 <br>
                使用：
            </li>
            <li>
                
            </li>
        </ul>
    </div>
</template>